<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bin/bootstrap.min.css">
    <script src="bin/jquery.min.js"></script>
    
	<script src="datepicker/wdatepicker.js"></script>
    <style>
        .warp{
            width: 90%;
            margin: 0 auto;
        }
        #template{
            display: none;
        }
        .shadow{
            position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:rgba(0,0,0,.5);
			display: none;
        }
        .pop{
			padding:20px 50px;
			width:600px;
			background-color:#fff;
			border-radius:10px;
			transform:translate(-50%,-50%);
			position:fixed;
			top:50%;
			left:50%;
			display: none;
		}
		.pop h2{
			margin-bottom: 20px;
		}
		select{margin-top:5px;}
    </style>
</head>
<body>
    <div class="warp">
        <h2 style="text-align: center;">学生信息管理系统</h2>
        <hr>
        <button class="btn btn-primary" id="addStudent" style="float:right;">+ 新增学生</button>
        <table class="table" style="text-align: center;">
            <thead>
                <tr>
                    <th style="text-align: center;">学号</th>
                    <th style="text-align: center;">姓名</th>
                    <th style="text-align: center;">年龄</th>
                    <th style="text-align: center;">性别</th>
                    <th style="text-align: center;">籍贯</th>
                    <th style="text-align: center;">入学年份</th>
                    <th style="text-align: center;">操作</th>
                </tr>
            </thead>
            <tbody class="data-student">
                <tr id="template">
                    <td class="data-id">1</td>
                    <td class="data-name">何亮</td>
                    <td class="data-age">20</td>
                    <td class="data-sex">男</td>
                    <td class="data-city">兰州</td>
                    <td class="data-joinTime">2017</td>
                    <td>
                        <button class="btn btn-danger delete">删除</button>
                        <button class="btn btn-success edit">编辑</button>
                    </td>
                </tr>
            </tbody>
        </table> 
    </div>
    <div class="shadow"></div>
    <div class="pop">
        <h2>添加学生</h2>
    
        <div class="form-horizontal">
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>
    
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="data-age" placeholder="年龄">
                </div>
            </div>
    
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline">
                    <input type="radio" name="sex" checked>男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="data-female">女
                </label>
            </div>
    
            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>
            
            
            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>
                <div class="col-sm-10">
                    <input type="input" class="form-control" id="data-joinDate" placeholder="入学日期">
                </div>
            </div>
            
            <div class="form-group" style="float:right;margin-top:20px;">
                <button id="submit" class="btn btn-primary">确认添加</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div>
    
    </div>
        <script src="bin/citys.js"></script>
        <script>
            let deLete = $(".delete");
            let template = $("#template");
            let tbody = $(".data-student")
            let addStudent = $("#addStudent")
            let shadow = $(".shadow")
            let pop = $(".pop")
            let addname = $("#data-name")
            let submit = $("#submit")
            //删除
            deLete.click(function(){
                let nowItem = $(this).closest("tr");
                if(confirm("真的要删除吗？")){
                    $.ajax({
                        url:"http://10.35.170.213:83/deleteStudent",
                        data:{
                            id:$(this).closest("tr").find(".data-id").html()
                        },
                        success(data){
                            if(data = "success"){
                                nowItem.fadeOut()
                            }
                        }
                    })
                }   
            })
            //添加
            addStudent.click(function(){
                shadow.fadeIn();
                pop.fadeIn();
            //添加请求
                submit.click(function(){
                if($("#data-name").val() && $("#data-age").val() && $("#data-joinDate")){
                    $.ajax({
                        url:"http://10.35.170.213:83/addStudent",
                        data:{
                            name:$("#data-name").val(),
                            age:$("#data-age").val(),
                            sex:$("#data-female")[0].checked ? 0 : 1,
                            joinDate:$("#data-joinDate").val(),
                            city:$("#province").val() + $("#city").val() + $("#area").val(),
                        },
                        success(data){
                            if(data === "success"){
                                history.go(0)
                            }
                            else{
                                alert("操作失败")
                            }
                        }
                    })
                }
            })
        })
            //取消添加
            $("#cancel").click(function(){
			shadow.fadeOut();
			pop.fadeOut();
		})
        //日期控件
            $("#data-joinDate").click(function(){
			    WdatePicker();
		    })

        //获取学生数据
        $.ajax({
            url:"http://10.35.170.213:83/getStudentList",
            success(data){
                console.log(data)
                
                data.forEach(item=>{
                    let nweItem = template.clone(true)
                    nweItem.css("display","table-row")
                    nweItem.find(".data-id").html(item.id)
                    nweItem.find(".data-name").html(item.name)
                    nweItem.find(".data-age").html(item.age)
                    nweItem.find(".data-sex").html(Number(item.sex) ?"男":"女")
                    nweItem.find(".data-city").html(item.city)
                    nweItem.find(".data-joinTime").html(item.joinDate)
                    nweItem.appendTo(tbody)
                })
            }
        })
        </script>
    </body> 
</html>